<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="userName">
            <Input v-model.trim="form.userName" placeholder="请输入用户名">
            <span slot="prepend">
                <Icon :size="16" style="color:#767884;" type="ios-person"></Icon>
            </span>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="form.userPwd" placeholder="请输入密码">
            <span slot="prepend">
                <Icon :size="14" style="color:#767884;" type="md-lock"></Icon>
            </span>
            </Input>
        </FormItem>
        <FormItem>
            <div>
                <Button @click="handleSubmit" type="primary" long>登录</Button>
            </div>
        </FormItem>
    </Form>
</template>
<script>

export default {
    name: 'LoginForm',
    props: {
        userNameRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ]
            }
        },
        passwordRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    data () {
        const userName = ''
        const userPwd = ''
        return {
            form: {
                userName,
                userPwd
            }
        }
    },
    computed: {
        rules () {
            return {
                userName: this.userNameRules,
                userPwd: this.passwordRules
            }
        }
    },
    methods: {
        handleSubmit () {
            // 对密码 进行MD5的加密处理 （后端做处理 前端加密可以加载js-md5组件，就可以直接使用了）
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    // 开始将请求发送给后端
                    this.$emit('on-success-valid', this.form)
                }
            })
        }
    }
}
</script>
